<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-v3/css/bootstrap.css">
    <style>
        .box1{
            background-color: aqua;
        }
        .box1-1{
            background-color: aquamarine;
        }
        .box1-2{
            background: pink;
        }
    </style>
</head>
<body>
    
    <!-- 
        栅格系统的原理：通过定义容器的大小，将其分成12份(有的框架 24 32 36，但12份是最常见的)，然后调整内外边距，结合媒体查询，就形成了响应式栅格系统
        1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
        2.列 colum 作为row的直接子元素
        3.列数之和不能超过12，超过就会换行

        .col-xs- 超小屏幕 手机 (<768px)
        .col-sm- 小屏幕 平板 (≥768px)
        .col-md- 中等屏幕 桌面显示器 (≥992px)
        .col-lg- 大屏幕 大桌面显示器 (≥1200px)
     -->
     <div class="container box1">
        <div class="row">
            <div class="col-lg-6 col-md-3 col-sm-8 col-xs-4 box1-1">123</div>
            <div class="col-lg-6 col-md-3 col-sm-4 col-xs-8 box1-2">456</div>
        </div>
     </div>
     <br>
     <br>
     <br>
     <!-- 
        列偏移：让两个相邻的列不相邻  col-md-offset-*
        列偏移和列总数不能超过12
       -->
       <div class="container">
            <div class="row">
                <div class="col-md-8 box1-1">123</div>
                <!-- 距离左边间距增加1份 -->
                <div class="col-md-3 col-md-offset-1 box1-2">123</div>
            </div>
       </div>
       <br>
       <br>
       <br>
    <!-- 
        列排序
        col-md-push-*  从左往右推*个
        col-md-pull-*  往左拉*个

     -->
     <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-push-4 box1-1">123</div>
            <div class="col-md-4 col-md-pull-8 box1-2">456</div>
        </div>
   </div>
   <br>
   <br>
   <br>
   <br>
   <!-- 
    列嵌套：一个列中套多行
    -->
    <div class="container box1">
        <div class="row">
            <div class="col-md-8  box1-1">
                <div class="row">
                    <div class="col-md-4 box1-1">666</div>
                    <div class="col-md-8 box1-2">777</div>
                </div>
                <div class="row">
                    <div class="col-md-4 box1-1">666</div>
                    <div class="col-md-8 box1-2">777</div>
                </div>
                <div class="row">
                    <div class="col-md-4 box1-1">666</div>
                    <div class="col-md-8 box1-2">777</div>
                </div>
            </div>
            <div class="col-md-4 box1-2">456</div>
        </div>
   </div>


    <!-- 依赖jq -->
    <script src="../jquery.min.js"></script>
    <script src="../bootstrap-v3/js/bootstrap.js"></script>
</body>
</html>